<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="js/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link href="css/css-1.css">
    <style type="text/css">

        .tao-define {
            display: flex;
            flex-direction: row;
            align-content: center;
            align-content: center;
            justify-content: center;
        }

        .tao-define span {
            display: block;
            height: 46px;
            font-size: 1.6rem;
            line-height: 46px;
            /*border: 1px solid red;*/
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tao-define > span:nth-child(2) {
            width: 110px;
            display: inline-block;
            text-align-last: right;
        }

        .tao-define > span:nth-child(4) {
            width: 60px;
        }

    </style>
    <script type="text/javascript" th:inline="javascript">
        $(function () {
            var loginActText = $.trim($("#loginAct").val());
            var loginPwdText = $.trim($("#loginPwd").val());
            var loginPwdComfirmText = $.trim($("#loginPwdComfirm").val());
            var nameText = $.trim($("#name").val());
            var emailText = $.trim($("#email").val());
            var loginActSpanObj = document.getElementById("loginActSpan");
            var loginPwdSpanObj = document.getElementById("loginPwdSpan");
            var loginPwdSpanComfirmObj = document.getElementById("loginPwdComfirmSpan");
            var nameSpanObj = document.getElementById("nameSpan");
            var emailSpanObj = document.getElementById("emailSpan");
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;


            $("button").click(function (ev) {
                ev.preventDefault();
            })

            //页面加载完毕后，将用户文本框中的内容清空
            // TODO

            //页面加载完毕后，让用户的文本框自动获得焦点
            // TODO
            $("#loginAct").focus();

            //为注册按钮绑定事件，执行注册操作
            $("#submitBtn").click(function () {
                register(); // TODO
            })
            //为当前注册也窗口绑定敲键盘事件
            //event:这个参数可以取得我们敲的是哪个键
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    register();// TODO
                }
            })

            $("#loginAct").blur(function () {
                loginActText = $.trim($("#loginAct").val());
                console.log("调用成功，账号为：" + loginActText);
                if (loginActText != "") {
                    loginActSpanObj.innerHTML = "✔";
                    loginActSpanObj.style.fontSize = "22px";
                } else {
                    loginActSpanObj.innerHTML = "❌";
                    loginActSpanObj.style.fontSize = "16px";
                }
            })
            $("#loginPwd").blur(function () {
                loginPwdText = $.trim($("#loginPwd").val());
                if (loginPwdText != "") {
                    loginPwdSpanObj.innerHTML = "✔";
                    loginPwdSpanObj.style.fontSize = "22px";
                } else {
                    loginPwdSpanObj.innerHTML = "❌";
                    loginPwdSpanObj.style.fontSize = "16px";
                }
            })
            $("#loginPwdComfirm").blur(function () {
                loginPwdComfirmText = $.trim($("#loginPwdComfirm").val());
                if (loginPwdComfirmText == loginPwdText && loginPwdText!='') {
                    loginPwdSpanComfirmObj.innerHTML = "✔";
                    loginPwdSpanComfirmObj.style.fontSize = "22px";
                } else {
                    loginPwdSpanComfirmObj.innerHTML = "❌";
                    loginPwdSpanComfirmObj.style.fontSize = "16px";
                }
            })
            $("#name").blur(function () {
                nameText = $.trim($("#name").val());
                if (nameText != "") {
                    nameSpanObj.innerHTML = "✔";
                    nameSpanObj.style.fontSize = "22px";
                } else {
                    nameSpanObj.innerHTML = "❌";
                    nameSpanObj.style.fontSize = "16px";
                }
            })
            $("#email").blur(function () {
                emailText = $.trim($("#email").val());
                if (reg.test(emailText)) {
                    emailSpanObj.innerHTML = "✔";
                    emailSpanObj.style.fontSize = "22px";
                } else {
                    emailSpanObj.innerHTML = "❌";
                    emailSpanObj.style.fontSize = "16px";
                }
            })


        })


        //普通的自定义的function方法，一定要写在$(function(){})的外面
        function register() {
            var loginActText = $.trim($("#loginAct").val());
            var loginPwdText = $.trim($("#loginPwd").val());
            var loginPwdComfirmText = $.trim($("#loginPwdComfirm").val());
            var nameText = $.trim($("#name").val());
            var emailText = $.trim($("#email").val());
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

            if (loginActText == "" || loginPwdText == "" || nameText == ""
                ) {
                document.getElementById('warn').innerHTML = "信息未填写完整";
                return false;
            }
            if (!reg.test(emailText)) {
                document.getElementById('warn').innerHTML = "邮箱格式错误";
                return false;
            }
            if (loginPwdComfirmText != loginPwdText) {
                document.getElementById('warn').innerHTML = "两次密码不相同";
                return false;
            }
            if (!(document.getElementById('msg').checked)){
                document.getElementById('warn').innerHTML = "请先阅读并同意用户协议";
                return false;
            }
            $.ajax({
                url: "user/register",
                data: {
                    "loginAct": loginActText,
                    "loginPwd": loginPwdText,
                    "name": nameText,
                    "email": emailText
                },
                type: "post",
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        alert("注册成功,点击跳转")
                        window.location.href = "login.html"
                    } else {
                        $("#msg").html(data.msg)
                    }
                }
            })

        }
    </script>
</head>
<body style="background-color:#eeeeee;background-image: url(https://g.alicdn.com/teambition/account-web/0.3.24/images/login-bg.7628d7f.jpg)">
<nav class="navbar navbar-default color" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" >BBS</a>

        </div>

        <div class="col-lg-6">
<!--            <ul class="nav navbar-nav">-->
<!--                <li><a href="main.html">首页</a></li>-->
<!--                <li><a href="question.html">问答</a></li>-->
<!--                <li><a href="help.html">帮助中心</a></li>-->
<!--                <li><a href="mine.html">我的</a></li>-->
<!--                <li>-->
<!--                    <form class="form-inline" style="margin-top:8px ">-->
<!--                        <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search">-->
<!--                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>-->
<!--                    </form>-->
<!--                </li>-->
<!--            </ul>-->

        </div>

        <div class="col-lg-2 col-lg-offset-2">
            <ul class="nav navbar-nav">
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html" class="">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container  color" style="height: 600px;background-color: #ffffff;border-radius: 15px;margin-top: 50px;margin-bottom: 50px">
    <div class="row" style="display: flex;flex-direction: row;align-content: space-between;box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 12px 20px rgba(38, 38, 38,0.12)">
        <img src="image/register.png" style=" height: 100%;width: 50%;position: center;margin: 10px;border-radius: 15px">
        <form class="form-horizontal  " style="margin-top: 35px;width: 50%;display: flex;flex-direction:column;align-items: center" role="form">
            <h3 class="form-title" style="font-size: 2em;color: #6c63ff;">注册</h3>
            <div style="width: 50px;height: 4px;border-radius: 45px;background-color: #6c63ff;margin-top: -7px;margin-bottom: 23px">   </div>
            <div class="col-sm-9 col-md-9 ">
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span>账 号：</span>
                    <input class="form-control" type="text" name="username" id="loginAct" placeholder="请输入账号">
                    <span id="loginActSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <span>密 码：</span>
                    <input class="form-control " type="password" name="password" id="loginPwd" placeholder="请输入密码">
                    <span id="loginPwdSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-key" aria-hidden="true"></i>
                    <span>确认密码:</span>
                    <input class="form-control " type="password" name="passwordComfirm" id="loginPwdComfirm"
                           placeholder="请输入密码">
                    <span id="loginPwdComfirmSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span>昵 称：</span>
                    <input class="form-control" type="text" name="name" id="name" placeholder="请输入昵称">
                    <span id="nameSpan" style="color: green"></span>
                </div>
                <div class="form-group input-group-lg tao-define">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <span>邮 箱：</span>
                    <input class="form-control" type="text" name="email" id="email" placeholder="请输入邮箱">
                    <span id="emailSpan" style="color: green"></span>
                </div>
                <div class="checkbox form-group " style="text-align: right;padding-right: 45px">
                    <input type="checkbox" checked="checked"  value="1" id="msg" >已阅读并同意<a>《用户协议》</a></input>
                </div>
                <div class="form-group " style="display: flex;flex-direction: row;align-items:center;align-content:space-between;justify-content: space-between">
                    <span id="warn" style="color: red;display: flex;width: 140px;height: 20px"></span>
                    <span style="display:flex;">已有账号？立即<a href="login.html" style="color: #6c63ff">登录</a></span>
                </div>
                <div class="form-group">
                    <button id="submitBtn" class="btn btn-primary btn-lg btn-block" style="background-color: #6c63ff">注册</button>
                </div>
            </div>
        </form>
    </div>

</div>
<div class="modal-footer"
     style="background-color:white;height: 130px;margin-top: 15px;display: flex;align-content: space-between;justify-content: center;flex-direction: column">
    <div align="center"><a style="color: grey">Powered by 斌斌家豪涛顺 &nbsp;&nbsp;联系我们</a></div>
    <div align="center"><a style="color: grey"> 蜀ICP备202101433459号</a></div>
    <div align="center"><a style="color: grey"> 蜀公网安备 510112453432354号</a></div>
</div>
</body>
</html>